<script setup>
import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router';
import { getCurrentInstance, reactive, ref } from 'vue';
import recordIcon from '@/assets/images/personalCenter/record-icon.png';
import addIcon from '@/assets/images/personalCenter/add-icon.png';
import feedbackIcon from '@/assets/images/personalCenter/feedback-icon.png';
import Record from '@/views/personalCenter/components/record';
import TplAdd from '@/views/personalCenter/components/tplAdd';
import {
  clearIsAdmin, clearPersonalCenterMenu,
  clearToken,
  clearUserInfo,
  getIsAdmin, getPersonalCenterMenu,
  getUserInfo, setPersonalCenterMenu,
  setUserInfo
} from '@/utils/cookie.js';
import SystemModule from '@/views/personalCenter/components/systemModule/systemModule.vue';
import LookOtherModule from '@/views/personalCenter/components/lookOtherModule/lookOtherModule.vue';
import SetHeadImg from '@/views/personalCenter/components/setHeadImg/setHeadImg.vue';
import { useCounterStore } from '@/stores/counter.js';
const { VITE_PROXY_DOMAIN_REAL } = import.meta.env;

const instance = getCurrentInstance();
const { $lodash } = instance.appContext.config.globalProperties;
const router = useRouter();
const {
  query: { moduleName },
} = useRoute();
const store = useCounterStore();

// 跳转到首页
function jumpHome() {
  router.push({ path: '/' });
}

// 用户信息
const userInfo = reactive({
  img: '',
  name: '用户昵称',
});
// 设置用户名和头像
const cookieUserInfo = JSON.parse(getUserInfo());
if (!$lodash.isEmpty(cookieUserInfo)) {
  userInfo.name = cookieUserInfo.userName;
  userInfo.img = cookieUserInfo.avatar;
}
// 操作按钮
const operateBtnList = [{ name: '生成记录', img: recordIcon, value: 'record' }];
const isAdmin = getIsAdmin();
if (isAdmin === 'true') {
  operateBtnList.push(
    { name: '通用模版', img: addIcon, value: 'systemModule' },
    { name: '查看用户上传模版', img: addIcon, value: 'lookOtherModule' },
  );
} else {
  operateBtnList.push(
    { name: '添加模板', img: addIcon, value: 'addModule' },
    { name: '意见反馈', img: feedbackIcon, value: 'feedback' },
  );
}
// 选中的操作按钮
const selectedOperateBtn = ref(isAdmin === 'true' ? 'systemModule' : 'addModule');
if (moduleName) {
  chooseOperateBtn(moduleName);
}
// 优先取缓存中的
const menu = getPersonalCenterMenu();
if (menu) {
  chooseOperateBtn(menu);
}
onBeforeRouteLeave((to, from) => {
  clearPersonalCenterMenu();
});
// 选择操作按钮
function chooseOperateBtn(value) {
  selectedOperateBtn.value = value;
  setPersonalCenterMenu(value);
}
// 设置头像
const showHeadImg = ref(false);
const headImgSetDialog = ref(false); // 上传头像弹窗
function setImg(url) {
  userInfo.img = `${url}`;
  cookieUserInfo.avatar = `${url}`;
  setUserInfo(cookieUserInfo);
  headImgSetDialog.value = false;
}
// 退出登录
function unLogin() {
  clearToken();
  clearIsAdmin();
  clearUserInfo();
  router.push({ path: '/login' });
}
</script>

<template>
  <div class="personal-center-box">
    <el-container>
      <el-header class="header-title">
        <div class="left-content">论文投稿排版系统 — 个人中心</div>
        <div class="right-content" @click="jumpHome">首页</div>
      </el-header>
      <el-container class="main-content">
        <el-aside>
          <div class="personal-info-box">
            <div
              class="head-image-box"
              @mouseenter="showHeadImg = true"
              @mouseleave="showHeadImg = false"
            >
              <img :src="userInfo.img" alt="" class="head-img" v-show="userInfo.img" />
              <el-button type="primary" v-show="showHeadImg" @click="headImgSetDialog = true"
                >设置头像</el-button
              >
            </div>
            <div class="user-name">{{ userInfo.name }}</div>
            <div class="logout-btn" @click="unLogin">退出登录</div>
          </div>
          <div class="menu-box">
            <template v-for="item in operateBtnList" :key="item.value">
              <div class="icon-box">
                <img :src="item.img" alt="" @click="chooseOperateBtn(item.value)" />
                <span class="name" @click="chooseOperateBtn(item.value)">{{ item.name }}</span>
                <span class="selected-icon" v-show="selectedOperateBtn === item.value"></span>
              </div>
            </template>
          </div>
        </el-aside>
        <el-main>
          <Record v-if="selectedOperateBtn === 'record'" />
          <TplAdd v-if="selectedOperateBtn === 'addModule'" />
          <SystemModule v-if="selectedOperateBtn === 'systemModule'" />
          <LookOtherModule v-if="selectedOperateBtn === 'lookOtherModule'" />
        </el-main>
      </el-container>
    </el-container>
  </div>
  <SetHeadImg v-if="headImgSetDialog" @close="headImgSetDialog = false" @set-img="setImg" />
</template>

<style scoped lang="less">
@import './personalCenter.less';
</style>
